@import './common.scss';
@mixin title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
    .left {
        i {
            font-size: 7.2vw;
            color: #ff9344;
        }
        span {
            display: inline-block;
            font-size: 4vw;
            height: 6.07vw;
            line-height: 6.07vw;
            vertical-align: text-bottom;
            color: #000000;
        }
    }
    .right {
        i {
            font-size: 3.37vw;
            color: #ff9344;
        }
        span {
            font-size: 4vw;
            line-height: 6.07vw;
            color: #000000;
        }
    }
}

.searchBox {
    display: flex;
    justify-content: center;
    .search {
        position: relative;
        input {
            width: 35.47vw;
            height: 6.8vw;
            background-color: #ffffff;
            border: solid 0.27vw #ff9344;
            border-radius: 5vw;
            box-sizing: border-box;
            font-size: 3vw;
            padding: 1.73vw 0 1.73vw 3.87vw;
        }
        i {
            position: absolute;
            font-size: 4vw;
            color: #ff9344;
            right: 1.5vw;
            top: 1.5vw;
            z-index: 10;
        }
    }
}

.all {
    width: 68.27vw;
    margin: 0% auto;
    margin-bottom: 6vw;
    p {
        text-align: center;
        font-size: 3.47vw;
        margin: 4.4vw 0 1.7vw;
    }
    .box {
        display: flex;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;
            margin: 0.3vw;
            margin-left: 0%;
            width: 16.67vw;
            font-size: 2.67vw;
            height: 8.53vw;
            background-color: #dcdcdc;
        }
    }
}

.hot {
    width: 95.73vw;
    margin: 0 auto;
    .title {
        @include title;
    }
    .imgList {
        display: flex;
        justify-content: space-between;
        .imgbox {
            overflow: hidden;
        }
        .box {
            display: inline-block;
            width: 56vw;
        }
        .f1 {
            width: 37.33vw;
            height: 46.93vw;
            img {
                width: 100%;
            }
        }
        .f2 {
            width: 56vw;
            padding-bottom: 1vw;
            height: 19.6vw;
            img {
                width: 100%;
            }
        }
        .f3 {
            width: 26vw;
            height: 26.27vw;
            display: inline-block;
            img {
                width: 100%;
            }
        }
        .f4 {
            width: 28.13vw;
            float: right;
            height: 26.27vw;
            img {
                width: 100%;
            }
        }
    }
}

.recommend {
    width: 95.73vw;
    margin: 0 auto;
    margin-top: 4vw;
    .title {
        @include title;
    }
    .imgList {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .imgbox {
            width: 30.4vw;
            height: 26.67vw;
            overflow: hidden;
            margin: .5vw;
            img {
                width: 100%;
            }
        }
    }
}